<template>
  <div class="loverTalk">
    <button @click="anotherOne">获取一句土味情话</button>
    <ul>
      <li v-for="item in loverStore.talkList" :key="item.id">
        {{ item.sentence }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="Lover">
//import { reactive } from "vue";
import axios from "axios";
import { nanoid } from "nanoid";
import { useLoverStore } from "../store/lover";
import { storeToRefs } from "pinia";

const loverStore = useLoverStore();
const talkList = storeToRefs(loverStore);
loverStore.$subscribe((mutate, state) => {
  console.log("loverStore 里面保存的数据发生了变化", mutate, state);
  //往浏览器中添加存储数据
  //浏览器的底层逻辑是字符串，需要将对象转为JSON格式的数据
  localStorage.setItem("talkList", JSON.stringify(state.talkList));
  //有了这个功能后可以实现刷新后数据不丢失
});

/*
let talkList = reactive([
  {
    id: "abc0001",
    sentence: "我喜欢你，像风走了八百里，不问归期。",
  },
  {
    id: "abc0002",
    sentence:
      "红豆可以做成红豆泥， 土豆可以做成土豆泥。 那你知道你可以做成什么泥吗？什么？ 我爱你。",
  },
  {
    id: "abc0003",
    sentence:
      "往后余生，我爱你； 地老天荒，我等你； 漫漫长路，我陪你；时时刻刻，我想你； 今生今世，只要你。",
  },
  {
    id: "abc0004",
    sentence: "我想变成你的猫，慵懒的躺在你怀里，打个滚，蹭蹭你。",
  },
]);
*/

/*
async function anotherOne() {
  let result = await axios.get(
    "https://api.uomg.com/api/rand.qinghua?format=json"
  );
  console.log(result.data);
  //talkList.push(result.data.content);  这句话之所以没用是因为没有 id, talkList 遍历不出来
  let obj = { id: nanoid(), sentence: result.data.content };
  console.log(obj);
  loverStore.talkList.push(obj)
}
*/

function anotherOne() {
  loverStore.anotherOne();
}
</script>

<style scoped>
.loverTalk {
  background-color: rgb(252, 210, 95);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>
